<template>
  <van-nav-bar title="录音管理" />
  <div>

    <van-cell-group>
    </van-cell-group>
    <van-button v-if="stopLocation" type="primary" style=" margin-top: 20px;"
      @click="startRecord">开始录音</van-button>
    <van-button v-else type="primary" style=" margin-top: 20px;" @click="stopResult">停止录音</van-button>
  </div>
  录音结果文件地址：
  <div>
    {{ data.file }}
  </div>
</template>

<script setup lang='ts' name=''>
import { reactive, ref } from "vue";


// Your script here
const stopLocation = ref(true)
let data = reactive({
   file:''
});


const startRecord = () => {
  console.log("startIntervalLocation");
  (window as any).whJSBridge.startRecord(recordCallback).then(
    function (res: any) {
      console.log("录音开始");
      stopLocation.value = false
    }).catch(function (err: any) {

      if ('object' == typeof err) {
        alert('启动录音出错：' + JSON.stringify(err))
      } else {
        alert('启动录音出错：' + err)
      }
    });
}

function recordCallback(resStr: any) {
  console.log("录音结束",resStr);
  const res = JSON.parse(resStr)


  if (res.flag) {
    console.log("录音成功");
    data.file = res.data
  } else {
   
  }
}


function stopResult() {
  (window as any).whJSBridge.stopRecord().then(
    function(res:any) {
      stopLocation.value = true
    })
    .catch(function(err:any) {
    });
}
</script>

<style scoped>
/* Your styles here */
</style>